import {
    degToRad,
    radToDeg,
} from './math.js';
import {
    select,
    line,
    curveBasis,
    path as d3Path,
} from 'd3';
const dom = {};
const circle_config = {
    radius: 50,
    strokeWidth: 2,
    strokeColor: 'black',
    fill:'white',
}
const basicAngle = 15;
const dist = 60;
const render = () => {
    select('div.container svg').remove();
    dom.container = select('div.container');
    dom.svg = dom.container.append('svg')
        .attr('width', '100%')
        .attr('height', '100%');
    
    const windowSize = {
        width:window.innerWidth,
        height:window.innerHeight,
    }
    const center = {
        x:windowSize.width/2,
        y:windowSize.height/2,
    }
    const space = circle_config.radius * 5;// 球间距
    dom.circleA = {
        x: center.x - space / 2,
        y: center.y,
        el: dom.svg.append('circle')
    };
    setCircle(dom.circleA.el, [dom.circleA.x, dom.circleA.y]);
    
    dom.circleB = {
        x: center.x + space / 2,
        y: center.y,
        el: dom.svg.append('circle')
    };
    setCircle(dom.circleB.el, [dom.circleB.x, dom.circleB.y]);

    const lineCount = 5;
    /* for (let i = 0; i < lineCount; i++) {
        drawLine(i + 1, lineCount);
    } */
    drawCurves(basicAngle, lineCount);
}
const drawLine = (current, lineCount = 1) => {
    const svg = dom.svg;
    var angle = 15 * (current - 1); // 旋转角度，单位为度
    var start = [
        dom.circleB.x + circle_config.radius * Math.cos(angle * Math.PI / 180),
        dom.circleB.y + circle_config.radius * Math.sin(angle * Math.PI / 180)
    ];
    // 计算曲线起始坐标
    var end = [
        dom.circleA.x + circle_config.radius * Math.cos(angle * Math.PI / 180),
        dom.circleA.y + circle_config.radius * Math.sin(angle * Math.PI / 180)
    ];
    
    // 创建曲线生成器
    var curve = line()
        .curve(curveBasis);
    // 添加曲线路径
    const arrowId = `arrow-${current}`;
    svg.append("path")
        .datum([start, end])
        .attr("d", curve)
        .attr("fill", "none")
        .attr("stroke", "red")
        .attr("marker-end", `url(#${arrowId})`);
    // 添加箭头
    const arrowWidth = 20;
    svg.append("svg:defs")
        .append("svg:marker")
        .attr("id", arrowId)
        .attr("viewBox", `0 -${arrowWidth / 2} ${arrowWidth} ${arrowWidth}`)
        .attr("refX", arrowWidth)
        .attr("refY", 0)
        .attr("markerWidth", arrowWidth * (6 / 10))
        .attr("markerHeight", arrowWidth * (6 / 10))
        .attr("orient", "auto")
        .append("svg:path")
        .attr("d", `M0,-${arrowWidth / 2}L${arrowWidth},0L0,${arrowWidth / 2}`)
        .attr("fill", "red");
}
const setCircle = (circle,centerPointer, radius = circle_config.radius) => {
    const [cx, cy] = centerPointer;
    circle
        .attr('r', radius)
        .attr('cx', cx)
        .attr('cy', cy)
        .style('stroke', circle_config.strokeColor)
        .style('stroke-width', circle_config.strokeWidth)
        .style('fill', circle_config.fill)
    return circle;
};
function calculateMidpoint(point1, point2, angle) {
    let offsetY = angle > 180
        ? dist
        : angle === 0
            ? 0
            : -dist;
    const a = angle > 180
        ? (360 - angle) / basicAngle
        : angle / basicAngle;
    offsetY *= a;
    const midpointX = (point1.x + point2.x) / 2;
    const midpointY = (point1.y + point2.y) / 2;
    const dx = point2.x - point1.x;
    const dy = point2.y - point1.y;
    const lineLength = Math.sqrt(dx * dx + dy * dy);
    const unitDx = dx / lineLength;
    const unitDy = dy / lineLength;
    const verticalMidpointX = midpointX + unitDy * offsetY;
    const verticalMidpointY = midpointY - unitDx * offsetY;
    return { x: verticalMidpointX, y: verticalMidpointY };
}
const computeAngle = (unitAngle, current, count) => {
    if (count === 1) return 0;
    if (count % 2 === 0) {
        const middle = count / 2 + 1;
        // 偶数
        if (current < middle) {
            return current * unitAngle;
        } else {
            return 360 - (current - middle + 1) * unitAngle;
        }
    } else {
        // 寄数
        const middle = Math.floor(count / 2) + 1;
        if (current === middle) return 0;
        if (current < middle) {
            return current * unitAngle;
        } else {
            return 360 - (current - middle) * unitAngle;
        }
    }
}
function calculateMirrorYPoint(circleCenter, circleRadius, pointP) {
    // 计算y轴镜像点坐标
    const vector = {
        x: pointP.x - circleCenter.x,
    };
    return {
        y: pointP.y,
        x: pointP.x - vector.x*2
    };
}
function drawCurves(unitAngle, numCurves, colors = []) {
    var svg = dom.svg;

    // 画曲线
    for (var i = 0; i < numCurves; i++) {
        const color = colors[i] || "red";
        // 计算当前曲线的起始角度和结束角度
        var angle = computeAngle(unitAngle, i + 1, numCurves);
        var startAngleCur = angle;
        var endAngleCur = angle;

        // 计算曲线起始坐标
        const radius = circle_config.radius;
        var start = [
            dom.circleA.x + radius * Math.cos(startAngleCur * Math.PI / 180),
            dom.circleA.y + radius * Math.sin(startAngleCur * Math.PI / 180)
        ];

        // 计算曲线结束坐标
        var end = [
            dom.circleB.x + radius * Math.cos(endAngleCur * Math.PI / 180),
            dom.circleB.y + radius * Math.sin(endAngleCur * Math.PI / 180)
        ];
        var endPointer = calculateMirrorYPoint(
            dom.circleB, circle_config.radius, { x: end[0], y: end[1] }
        )
        end = [endPointer.x,endPointer.y]
        // 计算曲线的控制点坐标
        var cpointer = calculateMidpoint({ x: start[0], y: start[1] }, { x: end[0], y: end[1] }, angle);
        var control = [
            cpointer.x,
            cpointer.y
        ];
        // 曲线生成器
        const path = d3Path();
        path.moveTo(start[0], start[1]);
        path.quadraticCurveTo(control[0], control[1], end[0], end[1]);
        // 添加曲线路径
        svg.append("path")
            .attr("d", path)
            .attr("fill", "none")
            .attr("stroke", color)
            .attr("stroke-width", circle_config.strokeWidth)
            .attr("marker-end", "url(#arrow)");
    }

    // 添加箭头
    svg.append("svg:defs")
        .append("svg:marker")
        .attr("id", "arrow")
        .attr("viewBox", "0 -5 10 10")
        .attr("refX", 8)
        .attr("refY", 0)
        .attr("markerWidth", 6)
        .attr("markerHeight", 6)
        .attr("orient", "auto")
        .append("svg:path")
        .attr("d", "M0,-5L10,0L0,5")
        .attr("fill", 'red');
}
const onresize = () => {
    render();
}
window.onresize = () => {
    onresize();
};
render();